<!--阶段划分	-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="zh-CN"/>
<title>码虫-阶段划分</title>
<link rel="stylesheet" type="text/css" th:href="@{/style/login.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/style/comment.css}"/>
<link type="text/css" rel="stylesheet" th:href="@{/style/biobox2.css}"/>
<link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
<link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
<link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
<link rel="stylesheet" th:href="@{/layui/dist/css/layui.css}" media="all">
<link rel="stylesheet" type="text/css" th:href="@{/style/container.css}">
<head>
    <style type="text/css">
        .qrhf {
            float: right;
            position: fixed;
            right: 20px;
            bottom: 120px;
        }
    </style>
    <style type="text/css">
        .jdSign {
            background-color: #FFFFFF;
            width: 40px;
            height: 40px;
            text-align: center;
            margin-left: 10px;
            border-color: #1FB1E1;
            color: #1FB1E1;
        }

        .ms {
            margin-left: 80px;
            width: 700px;
            height: 200px;
            resize: none;
        }
    </style>
<body>

<!--头开始-->
<header class="navbar-fixed-top headerbg" th:each="codeUser:${codeUsers}">
    <!--左上角logo-->
    <div class="logo">
        <a href="http://www.baidu.com" th:href="@{/mc/logged/loginIndex(userNo=${codeUser.userNo})}" class="fl mt10">
            <img th:src="@{/mb/images/mclogo.png}" style="margin-top: -30px;margin-left: 30px" alt=""></a></div>

    <!--导航栏剩余部分-->
    <div class="navBox hidden-xs hidden-sm" style="float: right;margin-right: 10%">
        <ul class="navList list-unstyled">
            <li class="navLi">
                <h3>
                    <a th:href="@{/mc/logged/loginIndex(userNo=${codeUser.userNo})}"><span>首页</span></a>
                </h3>
            </li>
            <li class="navLi"><h3><a href="#"
                                     th:href="@{/mc/item/loginItemsList(userNo=${codeUser.userNo})}"><span>项目</span></a>
            </h3></li>

            <li class="navLi">
                <h3>
                    <div th:if="${codeUser.type}==1">
                        <a href="#" th:href="@{/mc/item/myRelease(userNo=${codeUser.userNo})}"><span>我的发布</span></a>
                    </div>
                </h3>
            </li>

            <li class="navLi">
                <h3>
                        <span th:if="${codeUser.type}==1">
                            <a href="#"
                               th:href="@{/mc/item/releaseProject(userNo=${codeUser.userNo})}"><span>项目发布</span></a></span>
                </h3>
            </li>
            <li class="navLi">
                <h3>
                        <span th:if="${codeUser.type}==2">
                            <a href="#" th:href="@{/mc/stage/participatingProjects(userNo=${codeUser.userNo})}"><span>我的参与</span></a></span>
                </h3>
            </li>
            <li class="navLi"><h3><a href="#"
                                     th:href="@{/mc/logged/help(userNo=${codeUser.userNo})}"><span>帮助</span></a></h3>
            </li>
            <li class="navLi"><h3>
                <span th:if="${codeUser.image}">
                <img th:src="@{'/article/'+ ${codeUser.image}}" height="60px" width="60px"> </span>
                <span th:unless="${codeUser.image}">
                <img th:src="@{/images/center.png}" height="60px" width="60px">
                </span></h3>
                <div class="navSub">
                    <ul class="navSubList list-unstyled">
                        <li class="navSubLi">
                            <h4><a style="text-decoration: none" th:text="'hello，'+${codeUser.nickName}">hello，xxx</a>
                            </h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/userInformation(userNo=${codeUser.userNo})}">● 个人中心</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/moneyPay(userNo=${codeUser.userNo})}">● 我的开发宝</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/item/myCollection(userNo=${codeUser.userNo})}">● 我的收藏</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/advise(userNo=${codeUser.userNo})}">● 我要建议</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/}">● 退出登录</a></h4>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</header>
<!--头结尾-->
<!--动态线条-->
<div class="bannerN animated" style="height: 200px;">
    <div class="imgFull"><img class="img-responsive" th:src="@{/mb/images/ab_bg_01.png}"></div>
    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
</div>
<!--动态线条结尾-->
<div class="hr tp-div-nexthr" style="margin-top: 50px;"></div>
<!--头部代码结束-->


<em class="icon_Program" style="margin-left: 30px">
    <img th:src="@{/mb/images/bg_deng_03.png}">
</em>
<em class="icon_Program" style="margin-left: 30px">
    <img th:src="@{/mb/images/bg_deng_03.png}">
</em>
<em class="icon_Program" style="margin-left: 30px">
    <img th:src="@{/mb/images/bg_deng_03.png}">
</em>
<em class="icon_Program" style="margin-left: 30px">
    <img th:src="@{/mb/images/bg_deng_03.png}">
</em>
<em class="icon_Program" style="margin-left: 30px">
    <img th:src="@{/mb/images/bg_deng_03.png}">
</em>
<em class="icon_Program" style="margin-left: 30px">
    <img th:src="@{/mb/images/bg_deng_03.png}">
</em>
<em class="icon_Program" style="margin-left: 30px">
    <img th:src="@{/mb/images/bg_deng_03.png}">
</em>
<em class="icon_Program" style="margin-left: 30px">
    <img th:src="@{/mb/images/bg_deng_03.png}">
</em>
<em class="icon_Program" style="margin-left: 30px">
    <img th:src="@{/mb/images/bg_deng_03.png}">
</em>
<em class="icon_Program" style="margin-left: 30px">
    <img th:src="@{/mb/images/bg_deng_03.png}">
</em>
<!--动态添加div开始$("#data-table .child-talbe:last")-->
<!--动态添加div开始-->
<form action="stageDivision.html" method="post" th:action="@{/mc/stage/saveStage}">
    <div style="margin-top: 100px;margin-left: 20%;">
        <h2>阶段划分</h2>    <input type="button" class="layui-btn" id="btn" onclick="cDiv()" value='增加阶段'
                                style="margin-left: 15%;"/>
        <input type="button" class="layui-btn" id="rmbtn" onclick="removeE()" value='删除阶段' style="margin-left: 15%;"/>
        <div style="width:1000px;height:500px;background-color:white;" id="div1">
            <input readonly="readonly" value="P1" class="jdSign" name="list[0].stageNum"/>
            <span style="margin-left: 25px;">阶段名称</span>
            <input type="text" value="" required="required" placeholder="请输入阶段名称" name="list[0].stageName"/>
            <span style="margin-left: 25px;">计划交付日期</span>
            <input type="date" value="2018-01-02" required="required" placeholder="请输入交付日期" name="list[0].stageDate"/>
            <input type="hidden" value="0" required="required" placeholder="请选择计划交付金额" style="margin-left: 80px;"
                   name="list[0].stageMoney"/>
            <p style="margin-left: 80px;">交付说明</p>
            <textarea type="textera" required="required" maxlength="500" value="" name="list[0].stageExplain"
                      class="ms"></textarea>
        </div>
    </div>
    <div style="overflow: hidden; width:1px; height:1px;">
        <input id="userNo" name="userNo" th:value="${codeUsers.get(0).getUserNo()}"/>
        <input id="itemNo" name="itemNo" th:value="${codeItems.get(0).getItemNo()}"/>
    </div>
    <div class="qrhf">

        <a th:href="@{/mc/stage/participatingProjects(userNo=${codeUsers.get(0).getUserNo()})}">
            <button type="button" name="fanhui" id="fanhui" value="返回"
                    style="float: right;background-color: white;width: 80px;height: 40px;">
                返回
            </button>
        </a>

        <button name="huafen" id="huafen" type="submit" value="确认划分"
                style="float: right;background-color: white;width: 80px;height: 40px;">
            确认划分
        </button>
    </div>
</form>

<!--联系我们-->
<div class="contact-container">
    <div class="contact-connect-container" style="padding-bottom: 20px">
        <div class="button-container">
            <img th:src="@{/images/contacts.png}"/><span style="margin-left: 5px;">联系我们</span>
        </div>
        <div class="pop" style="display: none;">
            <div class="word" style="text-align: center;"><span style="font-size: 12px;">在线咨询请扫描下面二维码👇</span></div>
            <div style="height: 120px;width: 120px;margin:20px 22px;">
                <img th:src="@{/images/QR.jpg}" style="width: 120px;height: 120px;margin-top: -15px;"/>
            </div>
        </div>
    </div>
</div>

<footer class="footerBg" style="position: fixed;bottom: 0px;width: 100%;height:70px">
    <div class="container"><span class="footer_logo"><img th:src="@{/mb/images/mclogo.png}" width="40px" height="40px"></span>
        <span style="padding-right: 10px" class="CopyRight_name">码虫互联网服务外包平台 </span></div>
</footer>

</body>
<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/js/Contacts.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery1.4.js}"></script>
<script type="text/javascript" th:src="@{/js/borsertocss.js}"></script>
<script type="text/javascript" th:src="@{/js/bioV4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.lazyload.mini.js}"></script>
<script type="text/javascript" th:src="@{/js/function.js}"></script>
<script type="text/javascript" th:src="@{/js/biobox.js}"></script>

<!--引入-->


<script type="text/javascript">
    var i = 1;
    var id2 = 'div1';
    var add2 = 'add1';
    var del2 = 'del1';
    var t1 = document.getElementById('ipt');//根据id获取input节点

    function cDiv() {
        var oDiv = document.createElement("div");
        oDiv.style.width = "1000px"; //宽度
        oDiv.style.height = "500px"; //长度
        oDiv.style.backgroundColor = "white"; //背景色
        // oDiv.style.marginLeft = "20%";
        oDiv.id = 'div' + (i + 1);
        ;
        id2 = oDiv.id;
        var input1 = document.createElement("input");
        input1.readOnly = "true";
        input1.name = 'list[' + i + '].stageNum';
        input1.value = 'p' + (i + 1);
        input1.style.backgroundColor = "#FFFFFF";
        input1.style.width = "40px";
        input1.style.height = "40px";
        input1.style.textAlign = "center";
        input1.style.marginLeft = "10px";
        input1.style.borderColor = "#1FB1E1";
        input1.style.color = "#1FB1E1";
        input1.style.marginTop = "3px";
        input1.required = "required";
        oDiv.appendChild(input1);
        //第一个span
        var span1 = document.createElement("span");
        span1.style.marginLeft = "25px";
        span1.innerText = "阶段名称";
        oDiv.appendChild(span1);
        //第一个span之后的input框
        var input2 = document.createElement("input");
        input2.type = "text";
        input2.name = 'list[' + i + '].stageName'
        input2.placeholder = "请输入阶段名称";
        input2.style.marginLeft = "2px";
        input2.required = "required";
        oDiv.appendChild(input2);
        //第二个span
        var span2 = document.createElement("span");
        span2.style.marginLeft = "25px";
        span2.innerText = "计划交付日期";
        oDiv.appendChild(span2);
        //第二个span之后的input框
        var input3 = document.createElement("input");
        input3.type = "date";
        input3.name = 'list[' + i + '].stageDate'
        input3.placeholder = "请选择计划交付日期";
        input3.style.marginLeft = "2px";
        input3.required = "required";
        oDiv.appendChild(input3);
        //第一个p
        var p1 = document.createElement("p");
        p1.style.marginLeft = "80px";
        oDiv.appendChild(p1);
        //第一个p之后的input框
        var input4 = document.createElement("input");
        input4.type = "hidden";
        input4.name = 'list[' + i + '].stageMoney'
        input4.placeholder = "请选择计划交付金额";
        input4.style.marginLeft = "80px";
        input4.value = 0;
        input4.required = "required";
        oDiv.appendChild(input4);
        //第二个p
        var p2 = document.createElement("p");
        p2.style.marginLeft = "80px";
        p2.innerText = "交付说明";
        oDiv.appendChild(p2);
        //第二个P之后的textarea
        var textarea1 = document.createElement("textarea");
        textarea1.type = "text";
        textarea1.maxLength = "500";
        textarea1.name = 'list[' + i + '].stageExplain';
        textarea1.style.marginLeft = "80px";
        textarea1.style.width = "700px";
        textarea1.style.height = "300px"
        textarea1.style.resize = "none";
        oDiv.appendChild(textarea1);
        document.getElementById("div" + i).appendChild(oDiv);
        i++;
    }

    function removeE() {
        if (id2 == 'div1')
            alert("阶段划分时，至少有一个阶段！"); // 建议在这里验证一下，也是一个好习惯。成功之后要删掉
        document.getElementById("div" + (i - 1)).removeChild(document.getElementById(id2));
        // 拼接 id
        i--;
        id2 = 'div' + (i);
        add2 = 'add' + (i);
        del2 = 'del' + (i);
    }
</script>
</html>